<template>
  <div class="student-registration">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>报名登记</span>
        </div>
      </template>

      <el-steps :active="activeStep" finish-status="success" class="steps">
        <el-step title="填写基本信息" />
        <el-step title="上传证件照片" />
        <el-step title="选择培训班型" />
        <el-step title="确认信息" />
      </el-steps>

      <div class="step-content">
        <!-- 步骤1：基本信息 -->
        <div v-show="activeStep === 0">
          <el-form
            ref="basicFormRef"
            :model="basicForm"
            :rules="basicRules"
            label-width="120px"
            class="registration-form"
          >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="basicForm.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="basicForm.gender">
                <el-radio label="male">男</el-radio>
                <el-radio label="female">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                v-model="basicForm.birthday"
                type="date"
                placeholder="选择日期"
                :disabled-date="disabledDate"
              />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="basicForm.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="basicForm.idCard" placeholder="请输入身份证号" />
            </el-form-item>
            <el-form-item label="联系地址" prop="address">
              <el-input v-model="basicForm.address" placeholder="请输入联系地址" />
            </el-form-item>
          </el-form>
        </div>

        <!-- 步骤2：证件照片 -->
        <div v-show="activeStep === 1">
          <el-form
            ref="photoFormRef"
            :model="photoForm"
            :rules="photoRules"
            label-width="120px"
            class="registration-form"
          >
            <el-form-item label="身份证正面" prop="idCardFront">
              <el-upload
                class="upload-demo"
                action="#"
                :auto-upload="false"
                :on-change="handleIdCardFrontChange"
                :limit="1"
              >
                <template #trigger>
                  <el-button type="primary">选择文件</el-button>
                </template>
                <template #tip>
                  <div class="el-upload__tip">请上传清晰的身份证正面照片</div>
                </template>
              </el-upload>
            </el-form-item>
            <el-form-item label="身份证反面" prop="idCardBack">
              <el-upload
                class="upload-demo"
                action="#"
                :auto-upload="false"
                :on-change="handleIdCardBackChange"
                :limit="1"
              >
                <template #trigger>
                  <el-button type="primary">选择文件</el-button>
                </template>
                <template #tip>
                  <div class="el-upload__tip">请上传清晰的身份证反面照片</div>
                </template>
              </el-upload>
            </el-form-item>
            <el-form-item label="一寸照片" prop="photo">
              <el-upload
                class="upload-demo"
                action="#"
                :auto-upload="false"
                :on-change="handlePhotoChange"
                :limit="1"
              >
                <template #trigger>
                  <el-button type="primary">选择文件</el-button>
                </template>
                <template #tip>
                  <div class="el-upload__tip">请上传一寸证件照，白底彩色</div>
                </template>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>

        <!-- 步骤3：培训班型 -->
        <div v-show="activeStep === 2">
          <el-form
            ref="courseFormRef"
            :model="courseForm"
            :rules="courseRules"
            label-width="120px"
            class="registration-form"
          >
            <el-form-item label="驾照类型" prop="licenseType">
              <el-select v-model="courseForm.licenseType" placeholder="请选择驾照类型">
                <el-option label="C1手动挡" value="C1" />
                <el-option label="C2自动挡" value="C2" />
              </el-select>
            </el-form-item>
            <el-form-item label="培训班型" prop="courseType">
              <el-radio-group v-model="courseForm.courseType">
                <el-radio-button label="standard">标准班</el-radio-button>
                <el-radio-button label="express">快速班</el-radio-button>
                <el-radio-button label="vip">VIP班</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="培训费用">
              <span class="course-price">¥{{ calculatePrice() }}</span>
            </el-form-item>
            <el-form-item label="优惠方式" prop="discount">
              <el-checkbox-group v-model="courseForm.discount">
                <el-checkbox value="newStudent">新学员优惠</el-checkbox>
          <el-checkbox value="groupBuy">团报优惠</el-checkbox>
          <el-checkbox value="seasonal">季节性优惠</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="实付金额">
              <span class="actual-price">¥{{ calculateActualPrice() }}</span>
            </el-form-item>
          </el-form>
        </div>

        <!-- 步骤4：确认信息 -->
        <div v-show="activeStep === 3">
          <el-descriptions title="报名信息确认" :column="2" border>
            <el-descriptions-item label="姓名">{{ basicForm.name }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ basicForm.gender === 'male' ? '男' : '女' }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ basicForm.phone }}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{ basicForm.idCard }}</el-descriptions-item>
            <el-descriptions-item label="联系地址">{{ basicForm.address }}</el-descriptions-item>
            <el-descriptions-item label="驾照类型">{{ courseForm.licenseType }}</el-descriptions-item>
            <el-descriptions-item label="培训班型">{{ getCourseTypeName(courseForm.courseType) }}</el-descriptions-item>
            <el-descriptions-item label="应付金额">¥{{ calculatePrice() }}</el-descriptions-item>
            <el-descriptions-item label="优惠金额">¥{{ calculateDiscount() }}</el-descriptions-item>
            <el-descriptions-item label="实付金额">¥{{ calculateActualPrice() }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <div class="step-buttons">
        <el-button @click="prevStep" v-if="activeStep > 0">上一步</el-button>
        <el-button type="primary" @click="nextStep" v-if="activeStep < 3">下一步</el-button>
        <el-button type="success" @click="handleSubmit" v-if="activeStep === 3">提交报名</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 当前步骤
const activeStep = ref(0)

// 表单引用
const basicFormRef = ref(null)
const photoFormRef = ref(null)
const courseFormRef = ref(null)

// 基本信息表单
const basicForm = reactive({
  name: '',
  gender: 'male',
  birthday: '',
  phone: '',
  idCard: '',
  address: ''
})

// 照片表单
const photoForm = reactive({
  idCardFront: '',
  idCardBack: '',
  photo: ''
})

// 培训班型表单
const courseForm = reactive({
  licenseType: '',
  courseType: 'standard',
  discount: []
})

// 基本信息验证规则
const basicRules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  idCard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
  ],
  address: [{ required: true, message: '请输入联系地址', trigger: 'blur' }]
}

// 照片验证规则
const photoRules = {
  idCardFront: [{ required: true, message: '请上传身份证正面照片', trigger: 'change' }],
  idCardBack: [{ required: true, message: '请上传身份证反面照片', trigger: 'change' }],
  photo: [{ required: true, message: '请上传一寸证件照', trigger: 'change' }]
}

// 培训班型验证规则
const courseRules = {
  licenseType: [{ required: true, message: '请选择驾照类型', trigger: 'change' }],
  courseType: [{ required: true, message: '请选择培训班型', trigger: 'change' }]
}

// 禁用日期
const disabledDate = (time) => {
  return time.getTime() > Date.now()
}

// 照片上传处理
const handleIdCardFrontChange = (file) => {
  photoForm.idCardFront = file.raw
}

const handleIdCardBackChange = (file) => {
  photoForm.idCardBack = file.raw
}

const handlePhotoChange = (file) => {
  photoForm.photo = file.raw
}

// 计算培训费用
const calculatePrice = () => {
  const basePrice = {
    C1: {
      standard: 5800,
      express: 6800,
      vip: 8800
    },
    C2: {
      standard: 6300,
      express: 7300,
      vip: 9300
    }
  }
  return basePrice[courseForm.licenseType]?.[courseForm.courseType] || 0
}

// 计算优惠金额
const calculateDiscount = () => {
  let discount = 0
  if (courseForm.discount.includes('newStudent')) discount += 300
  if (courseForm.discount.includes('groupBuy')) discount += 500
  if (courseForm.discount.includes('seasonal')) discount += 200
  return discount
}

// 计算实付金额
const calculateActualPrice = () => {
  return calculatePrice() - calculateDiscount()
}

// 获取培训班型名称
const getCourseTypeName = (type) => {
  const typeMap = {
    standard: '标准班',
    express: '快速班',
    vip: 'VIP班'
  }
  return typeMap[type] || type
}

// 上一步
const prevStep = () => {
  activeStep.value--
}

// 下一步
const nextStep = async () => {
  if (activeStep.value === 0) {
    await basicFormRef.value.validate((valid) => {
      if (valid) activeStep.value++
    })
  } else if (activeStep.value === 1) {
    await photoFormRef.value.validate((valid) => {
      if (valid) activeStep.value++
    })
  } else if (activeStep.value === 2) {
    await courseFormRef.value.validate((valid) => {
      if (valid) activeStep.value++
    })
  }
}

// 提交报名
const handleSubmit = () => {
  ElMessage.success('报名信息提交成功')
  // 实现提交逻辑
}
</script>

<style scoped>
.student-registration {
  padding: 20px;
}

.steps {
  margin: 20px 0 40px;
}

.registration-form {
  max-width: 600px;
  margin: 0 auto;
}

.step-buttons {
  margin-top: 40px;
  text-align: center;
}

.course-price,
.actual-price {
  font-size: 24px;
  color: #f56c6c;
  font-weight: bold;
}

.el-upload {
  width: 100%;
}

.el-upload__tip {
  line-height: 1.2;
  padding: 8px 0;
  color: #909399;
}
</style>